<template>
  <div id="container">
    <div id="header">
      <div id="logo">
          <img src="../assets/logo.png">
      </div>
      <div id="title">
          <h3>狗眼电影</h3>
          <p>查影讯，上狗眼电影就够了！</p>
      </div>
      <div id="btn">
        <a href="">请输入电影名</a>
      </div>
    </div>
    <div id="top">
      <a href=""><router-link to="/inTheaters" class="v-nav">正在热映</router-link></a><a href=""><router-link to="/comingSoon" class="v-nav">即将上映</router-link></a>
    </div>
    <loading v-if="loading"></loading>
    <div id="nav" class="MovieList" v-if="!loading">
      <div class="item" v-for="movie in MovieList" v-on:click="gotoDetail(movie.id)">
        <div class="nav_left">
          <img v-bind:src="movie.images.medium">
        </div>
        <div class="nav_right">
          <ul>
            <li><a href=""><h2>{{movie.title|limitLength}}</h2></a></li>
            <star v-bind:num="movie.rating.stars"></star>
            <li><a href="">{{movie.rating.average}}分</a></li>
            <li><a href="">导演:{{movie.directors[0].name}}</a></li>
            <li><a href="" class="break">主演:<span v-for="cast in movie.casts">{{cast.name}}</span></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import star from './star'
import loading from './loading'
export default {
  name: 'MovieList',
  data () {
    return {
      loading:true,
      MovieList:[
    
      ]
    }
  },
  components:{
    star,
    loading
  },
  mounted(){
    this.$http.jsonp("https://api.douban.com/v2/movie/in_theaters")
    //this.$http.get("https://localhost:8080/static/data.json")
    .then(function(response){
        this.loading = false;
        this.MovieList = response.body.subjects;
      })
  },
  filters: {
    limitLength: function (value) {
      return value
    },
    countStar:function(value){
    }
  },
  methods:{
    gotoDetail:function(id){
      this.loading=false
      this.$router.push({ name: 'MovieDetail', params: { id: id }})
    },
    serch: function () {
        this.$router.push({path: '/searchPage'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a{
  text-decoration: none;
}
li{
  list-style: none;
}
#container{
}
#header{
  height: 40px;
  background: #e5e9f2;
  padding: 10px 20px;
}
#logo{
  float: left;
}
#logo img{
  height: 42px;
  width: 42px;
}
#title{
  float: left;
  margin-left: 5px;
}
#title h3{
  font-size: 17px;
  font-weight: 700;
  color: #333;
}
#title p{
  font-size: 12px;
  color: #999;
}
#btn{
  position: absolute;
  right: 20px;
  display: inline-block;
  float: right;
  width: 100px;
  border: 0px solid #333;
  border-radius: 15px;
  height: 40px;
  background-color: #fff;
}
#btn a{
  padding-left: 10px;
  font-size: 12px;
  line-height: 40px;
  color: #999;
}
#top{
  height: 35px;
  background-color: #df2d2d;
}
#top a{
  width: 50%;
  text-align: center;
  display: inline-block;
  color: #f9fafc;
  font-size:20px;
  line-height: 35px; 
}
#nav{
  padding: 20px 20px 10px 20px;
  margin: 0 auto;
}
.nav_left{
  float: left;
  clear: both;
}
.nav_left img{
  width: 65px;
  height: 100px;
  padding-top: 10px
}
.nav_right{
  float: left;
  margin-left: 15px;
}
.nav_right ul li h2{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}
.nav_right a{
  font-size: 14px;
  color: #666;
}
.nav_right img{
  width: 14px;
  height: 14px;
}
.break{
  position: absolute;
}
.item{
  clear: both;
  border-bottom:1px solid #d6d6d6;
  margin-bottom: 10px;
  height: 148px;
}

</style>
